
.master-detail {

  --master-detail-width: 225px;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;

  .md-master {

    width: var(--master-detail-width);
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--sidebar-border-color);
    background-color: color-mix(in srgb, var(--sidebar-bg-color), var(--background-color) 50%);

    .md-master-header {
      padding: 2rem 1rem;
      border-bottom: 1px solid var(--sidebar-border-color);
      margin-bottom: 1rem;
      text-align: center;
      color: var(--faded-text-color);

      .md-master-header-title {
        font-weight: var(--font-weight-medium);
        margin-bottom: 1rem;
        color: var(--dimmed-text-color);
      }
    }

    .md-master-list {
  
      margin-top: 0.5rem;
      width: var(--master-detail-width);
      overflow-y: auto;
      scrollbar-gutter: stable;
      scrollbar-color: var(--sidebar-scroll-thumb-color) var(--sidebar-bg-color);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;

      .md-master-list-item {

        --master-list--item-font-size: 15.5px;

        flex-direction: row;
        align-items: center;
        height: auto;
        padding: 0.5rem;
        display: flex;
        border-radius: 6px;
        font-size: var(--master-list--item-font-size);
        color: var(--text-color);
        cursor: pointer;
        gap: 0.5rem;

        .logo {
          flex: 0 0 1.5rem;
          text-align: center;
          height: var(--master-list--item-font-size);
        }

        .icon {
          color: var(--text-color);
          width: 1.125rem;
          height: 1.125rem;
        }

        &.selected {
          background-color: var(--sidebar-selected-color);
          color: var(--text-color);
          .icon {
            color: var(--text-color);
          }
        }
      }

    }

    .md-master-actions button {
      box-shadow: none;
    }

  }

  .md-detail {
    flex: 1;
    padding: 1rem 1.5rem;
    background-color: inherit;
    overflow: auto;
    height: auto;
  } 

}

@media (prefers-color-scheme: dark) {
  .settings .master-detail .md-master .list .item .image {
    filter: invert(1);
  }
  .settings .master-detail .md-master .list .item .icon {
    fill: var(--text-color);
  }
}
